import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem,NavBar,Icon } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
@connect(() => {
  return ({

  })
})
export default class MyOrder extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      orderItem:[],
      loading: true,
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: "Il mio ordine 我的订单",
        path: location.pathname + location.search
      }
    });
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          "url": "qry/all?_c=app_user_order_list",
          "params": [
          ]
        },
        callback: (result) => {
          let { data } = result;
          console.log(data)
          this.setState({
            orderItem:data,
            loading:false
          })
        }
      }
    })
  }
  handleOrder=(item,item1)=>{
    let {dispatch} = this.props;
    console.log(item);
    // localStorage.setItem("list_id",item.id);
    goToPage({ dispatch, config: { url: "/orderDetail?id="+item.id }, isReplace: false })
  }
  renderList() {
    let { orderItem} = this.state;
    if (!orderItem || orderItem.length == 0) {
      return (
        <div style={{ padding: "40px 0", textAlign: "center", fontSize: "20px", color: "#555" }}>
          {T("No products(暂无订单)")}
        </div>
      )
    }
    else {
      let contents = [];
      return (
          <div>
            {
              orderItem.map((item, k) => {
                let { order_type, created_time, order_code, quantity, total_amount,} = item;
                return(
                  <div style={{padding:'5% 3% 4% 5%',borderBottom:'10px solid #F3F3F5'}} onClick={this.handleOrder.bind(this.item,item)} key={k}>
                    <div style={{overflow:'hidden',color:'#2E2D35'}}>
                      <div style={{float:'left',width:'85%'}}>{order_type}</div>
                      <div style={{float:'left'}}>€{total_amount}</div>
                    </div>
                    <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2% 0'}}>Tempo di prelievo 商品数量</div>
                    <div style={{color:'#595867',fontSize:'15px'}}>{quantity}</div>
                    <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2%'}}>Tempo di prelievo 下单时间</div>
                    <div style={{color:'#595867',fontSize:'12px'}}>{created_time}</div>
                    <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2%'}}>Numero d'ordine 订单编号</div>
                    <div style={{color:'#595867',fontSize:'12px'}}>{order_code}</div>
                  </div>
                )



              })
            }
          </div>
      )
    }
  }
  render(){
    let {dispatch} = this.props;
    let {orderItem} = this.state;
    let {loading} = this.state;
    if (loading) {
      return (
        <div className="normal">
          <ActivityIndicator toast text="正在加载" animating={true} />
        </div>
      )
    }
    return(
      <div style={{height:"100%",background:'#fff'}}>
        <div style={{fontWeight:'bold',paddingTop:'40px'}}>
          {this.renderList()}
        </div>
      </div>
    )
  }
}
